﻿<!DOCTYPE html>
<html manifest="offline.appcache">
<head>
    <title>Untitled Page</title>
    <style>
        #canvasGroup
        {   position: relative;
            width: 500px;
            height: 4000px;
        }
        #canvas
        {   z-index: 2;
            position: absolute;
            left: 0px;
            top: 0px;
        }
        #canvasBack
        {   z-index: 1;
            position: absolute;
            left: 0px;
            top: 0px;
        }
    </style>

    <script>
        var context;
        var canvas;
        var posX = 50;
        var posY = 50;
        var speed = 3;
        var dirX = 1;
        var dirY = 1;


	  window.onload = init;
      
        function init() {
            printCanvas();
            startCanvas();
            //successGeo({ coords: { latitude: 50, longitude: 50} });
            //getCurrentLocation();
        }
        function printCanvas() {
            var canvas2 = document.getElementById('canvasBack');
            var context2 = canvas2.getContext('2d');
            context2.fillStyle = 'blue';
            context2.globalAlpha = .3;
            context2.fillRect(0, 0, canvas2.width, canvas2.height);
            context2.stroke();
            context2.fill();
        }
        function startCanvas() {

            canvas = document.getElementById('canvas');
            context = canvas.getContext('2d');
            setInterval(animate, 20);
        }
        function drawBall(x, y) {
            context.beginPath();
            context.arc(x, y, 20, 0, Math.PI * 2, true);
            context.fillStyle = "green";
            context.fill();

        }
        function clearContext() {
            context.clearRect(0, 0, canvas.width, canvas.height);
        }
        function animate() {
            clearContext();
            if (posX >= canvas.width - 20 || posX <= 20) {
                dirX *= -1;
            }
            if (posY >= canvas.height - 20 || posY <= 20) {
                dirY *= -1;
            }
            posX += speed * dirX;
            posY += speed * dirY;
            drawBall(posX, posY);
        }

        function sendMessage() {
            frame = document.getElementsByTagName('iframe')[0];
            var dataToSend = document.getElementById('name').value;
            frame.contentWindow.postMessage(dataToSend, '*');
        }
        window.addEventListener('message', messageHandler);
        function messageHandler(e) {
            alert(e.data);
        }
        function playPauseVideo(arg) {
            frame = document.getElementsByTagName('iframe')[0];
            frame.contentWindow.postMessage(arg, '*');
        }
        function getCurrentLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(successGeo, failGeo);
            }
        }
        function successGeo(position) {
            window.location = 'http://maps.google.com/maps?q=' + position.coords.latitude + ',' + position.coords.longitude;
        }
        function failGeo(error) {
            alert(error.message);
        }
worker = new Worker("http://localhost/HTML5-Major/worker.js");
 function startWorker() {
if(!worker)
{
worker = new Worker("http://localhost/HTML5-Major/worker.js");
}

worker.onmessage = function (e) {
	
	 document.getElementById('workerResponse').innerHTML = e.data;
};

worker.onerror = function (e) {
	 document.getElementById('workerResponse').innerHTML = e.data;
};
           worker.postMessage(0);
        }
 function stopWorker() {
           worker.terminate();
        }
    </script>

</head>
<body>
    <section style="float: left">
<h3>Canvas with Audio</h3>
   <section id="canvasGroup">
   <canvas id="canvas" height="400" width="500">
   Your browser doesn't support the HTML5 canvas element.
   </canvas>
   <canvas id="canvasBack" height="400" width="500">	
	Your browser doesn't support the HTML5 canvas element.
   </canvas>
   </section>	
    <audio autoplay loop>
     <source src="song.ogg" type="audio/ogg" />
     <source src="song.mp3" type="audio/mp3" />
      Your browser does not support the audio tag.
   </audio> 
 </section>
    <section>
    <h3>Input with CORS & Geo-Location</h3>
    <section>
<input type="text" id="name" required>
<input type="submit" value="Send" onclick="sendMessage()">
<input type="submit" value="Pause" onclick="playPauseVideo('pause')">
<input type="submit" value="play" onclick="playPauseVideo('play')">
<input type="submit" value="Get Current Location" onclick="getCurrentLocation()">
</section>
    <iframe width="400" height="350" src="childPage.htm"></iframe>
    </section>
    <section>
<input type="submit" value="Start Worker" onclick="startWorker()">
<input type="submit" value="Stop Worker" onclick="stopWorker()">
<span id="workerResponse"></span>

</section>
</section>
</body>
</html>
